<template>
  <div class="new-agent">
    <el-breadcrumb separator="/" class="page-title">
      <el-breadcrumb-item>{{$t('m.MyAds')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="agentForm" :inline="true" :rules="rules" :model="agentForm" label-width="240px"
             class="container-padding form-min-width">
      <!--Listing Type-->
      <el-form-item :label="$t('m.ListingType')" prop="transactionTypeId">
        <el-radio-group v-model="agentForm.transactionTypeId">
          <el-radio :label="2" name="transactionTypeId">{{$t('m.ForRent')}}</el-radio>
          <el-radio :label="1" name="transactionTypeId">{{$t('m.ForSale')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--Property type-->
      <el-row>
        <el-form-item :label="$t('m.PropertyType')" prop="propertyTypeId">
          <el-select v-model="agentForm.propertyTypeId" placeholder="" @change="getSubType($event)">
            <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0" prop="propertySubTypeId">
          <el-select v-model="agentForm.propertySubTypeId" placeholder="">
            <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <!--Township-->
      <el-row>
        <el-form-item :label="$t('m.Township')" prop="regionId">
          <el-select v-model="agentForm.regionId" placeholder="" @change="getTownships($event)">
            <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0" prop="townshipId">
          <el-select v-model="agentForm.townshipId" placeholder="">
            <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <!--Address-->
      <el-form-item :label="$t('m.Address')" prop="street">
        <el-input v-model="agentForm.street" style="min-width:440px;"
                  :placeholder="$t('m.examplePlacehoder')"></el-input>
      </el-form-item>
      <!--Property Name-->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label="$t('m.PropertyName')" prop="propertyName">
            <el-input v-model="agentForm.propertyName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--Total Building Floor-->
      <el-row>
        <el-form-item :label="$t('m.TotalBuildingFloor')" v-if="this.agentForm.propertyTypeId!=4" prop="totalFloor">
          <el-select v-model="agentForm.totalFloor" placeholder="">
            <el-option v-for="c in floorsTotal" :key="c.value" :label="c.text" :value="c.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.FloorNumber')"
                      v-if="this.agentForm.propertyTypeId!=3 && this.agentForm.propertyTypeId!=4" prop="floorNo">
          <el-select v-model="agentForm.floorNo" placeholder="">
            <el-option v-for="c in floor" :key="c.value" :label="c.text" :value="c.value"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <!--Room-->
      <el-row v-if="this.agentForm.propertyTypeId!=4">
        <el-form-item :label="$t('m.Room')" prop="masterBedrooms">{{$t('m.Master')}}
          <el-select v-model="agentForm.masterBedrooms" placeholder="">
            <el-option v-for="c in master" :key="c.value" :label="c.text" :value="c.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" label-width="0" prop="bathrooms">{{$t('m.Bedroom')}}
          <el-select v-model="agentForm.bathrooms" placeholder="">
            <el-option v-for="c in bedroom" :key="c.value" :label="c.text" :value="c.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" label-width="0" prop="bedrooms">{{$t('m.Bathroom')}}
          <el-select v-model="agentForm.bedrooms" placeholder="">
            <el-option v-for="c in bathroom" :key="c.value" :label="c.text" :value="c.value"></el-option>
          </el-select>
        </el-form-item>
      </el-row>



      <!--Floor Size (feet)-->
      <div v-if="this.agentForm.propertyTypeId!=4">

        <el-form-item :label="$t('m.FloorSizefeet')" prop="floorLengthWidth">
          <el-radio-group v-model="agentForm.floorLengthWidth">
            <el-radio label="0" name="floorSize">{{$t('m.LengthWidth')}}</el-radio>
            <el-radio label="1" name="floorSize">{{$t('m.Area')}}</el-radio>
          </el-radio-group>
        </el-form-item>


        <el-row v-if="agentForm.floorLengthWidth == '0'" style="padding-left:160px;"><!--Area/(length|width)切换-->
          <div v-if="!agentForm.floorSize"><!--如果Area不为空，length和width禁止输入-->
            <el-form-item :label="$t('m.Length')" label-width="80px" prop="floorLength">
              <el-input v-model.number="agentForm.floorLength" :maxlength="7" style="width:100px;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.xWidth')" label-width="80px" prop="floorWidth">
              <el-input v-model.number="agentForm.floorWidth" :maxlength="7" style="width:100px;"></el-input>
            </el-form-item>
            <el-form-item> = {{computeFloorSize}}</el-form-item>
          </div>
          <div v-else>
            <el-form-item :label="$t('m.Length')" label-width="80px" prop="floorLength">
              <el-input v-model.number="agentForm.floorLength" :maxlength="7" style="width:100px;" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.xWidth')" label-width="80px" prop="floorWidth">
              <el-input v-model.number="agentForm.floorWidth" :maxlength="7" style="width:100px;" disabled></el-input>
            </el-form-item>
            <el-form-item> = {{computeFloorSize}}</el-form-item>
          </div>
        </el-row>



        <el-row v-else style="padding-left:160px;"><!--如果length和width不为空，Area禁止输入-->
          <el-form-item :label="$t('m.Area')" label-width="80px" v-if="!agentForm.floorLength && !agentForm.floorWidth"
                        prop="floorSize">
            <el-input v-model.number="agentForm.floorSize" :maxlength="18" style="width:300px;"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.Area')" label-width="80px" v-else prop="floorSize">
            <el-input v-model.number="agentForm.floorSize" :maxlength="18" style="width:300px;" disabled></el-input>
          </el-form-item>
        </el-row>



      </div>


      <!--Land Size (feet)-->
      <div v-if="this.agentForm.propertyTypeId!=1 && this.agentForm.propertyTypeId!=2">
        <el-form-item :label="$t('m.LandSizefeet')" v-if="this.agentForm.propertyTypeId==3" prop="landLengthWidth">
          <el-radio-group v-model="agentForm.landLengthWidth"><!--非必填-->
            <el-radio label="0" name="landSize">{{$t('m.LengthxWidth')}}</el-radio>
            <el-radio label="1" name="landSize">{{$t('m.Area')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('m.LandSizefeet')"
                      prop="landLengthWidth"
                      :rules="[
                          { required: true, message: 'please select ', trigger: 'change'},
                      ]"
                      v-else>
          <el-radio-group v-model="agentForm.landLengthWidth">
            <el-radio label="0" name="landSize">{{$t('m.LengthxWidth')}}</el-radio>
            <el-radio label="1" name="landSize">{{$t('m.Area')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row v-if="agentForm.landLengthWidth == '0'" style="padding-left:160px;"><!--Area/(length|width)切换-->
          <div v-if="!agentForm.landSize"><!--如果Area不为空，length和width禁止输入-->
            <el-form-item :label="$t('m.Length')" label-width="80px" prop="landLength">
              <el-input v-model.number="agentForm.landLength" :maxlength="7" style="width:100px;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.xWidth')" label-width="80px" prop="landWidth">
              <el-input v-model.number="agentForm.landWidth" :maxlength="7" style="width:100px;"></el-input>
            </el-form-item>
            <el-form-item> = {{computelandSize}}</el-form-item>
          </div>
          <div v-else>
            <el-form-item :label="$t('m.Length')" label-width="80px" prop="landLength">
              <el-input v-model.number="agentForm.landLength" :maxlength="7" style="width:100px;" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.xWidth')" label-width="80px" prop="landWidth">
              <el-input v-model.number="agentForm.landWidth" :maxlength="7" style="width:100px;" disabled></el-input>
            </el-form-item>
            <el-form-item> = {{computelandSize}}</el-form-item>
          </div>
        </el-row>
        <el-row v-else style="padding-left:160px;"><!--如果length和width不为空，Area禁止输入-->
          <el-form-item :label="$t('m.Area')" label-width="60px" v-if="!agentForm.landLength && !agentForm.landWidth"
                        prop="landSize">
            <el-input v-model.number="agentForm.landSize" :maxlength="18" style="width:300px;"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.Area')" label-width="60px" v-else prop="landSize">
            <el-input v-model.number="agentForm.landSize" :maxlength="18" style="width:300px;" disabled></el-input>
          </el-form-item>
        </el-row>
      </div>
      <!--Price-->
      <el-row>
        <!--根据currenid传不同的price，usd 或者 mmk-->
        <el-form-item :label="$t('m.Price')" prop="price">
          <!--<el-input v-model.number="agentForm.price"-->
          <!--:maxlength="18"-->
          <!--@input="changeNumber"></el-input>-->
          <el-input v-model.number="agentForm.price" :maxlength="18"></el-input>
        </el-form-item>
        <!--facingType furnishingType-->
        <el-form-item prop="currencyId">
          <el-select v-model="agentForm.currencyId" placeholder="">
            <el-option v-for="c in currency" :key="c.value" :label="c.text" :value="c.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="conditionTypeId">
          <el-select v-model="agentForm.conditionTypeId" placeholder="">
            <el-option v-for="c in conditionType" :key="c.value" :label="c.text" :value="c.value"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <!--Description-->
      <el-row>
        <el-form-item :label="$t('m.Description')" prop="description">
          <el-input
            style="min-width:500px;"
            type="textarea"
            :rows="3"
            :maxlength="2000"
            placeholder=""
            @input="descriptionConter()"
            v-model="agentForm.description">
          </el-input>
        </el-form-item>
        <el-form-item class="agent-conter">
          <span>{{remnant1}}/2000</span>
        </el-form-item>
      </el-row>
      <!--Photos-->
      <!--注释主图上传-->
      <!--<el-row>-->
      <!--<el-form-item label="Photo (cover)" class="agent-photo">-->
      <!--<uploadimages ref="uploadPhotos1" :coverPhoto.sync="coverPhoto"></uploadimages>-->
      <!--</el-form-item>-->
      <!--</el-row>-->
      <el-row>
        <el-form-item :label="$t('m.Photomax40')" class="agent-photo">
          <uploadmoreimages ref="uploadPhotos"></uploadmoreimages>
        </el-form-item>
      </el-row>
      <!--Google Map-->
      <el-row>
        <el-form-item :label="$t('m.map')" class="agent-google-map">
          <googleMap ref="googleMap"></googleMap>
        </el-form-item>
      </el-row>
      <!--Details-->
      <el-collapse class="spread-box">
        <el-collapse-item :title="$t('m.Details')" name="1">
          <el-row>
            <el-form-item label=" " v-if="this.agentForm.propertyTypeId!=4" prop="furnishingId">{{$t('m.Furnishing')}}
              <el-select v-model="agentForm.furnishingId" placeholder="">
                <el-option v-for="c in furnishingType" :key="c.value" :label="c.text" :value="c.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" label-width="0" v-if="this.agentForm.propertyTypeId!=4" prop="buildYear">
              {{$t('m.BuiltYear')}}
              <el-date-picker
                v-model="agentForm.buildYear"
                type="year"
                value-format="yyyy"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" label-width="0" v-if="this.agentForm.propertyTypeId!=4" prop="facingId">
              {{$t('m.Facing')}}
              <el-select v-model="agentForm.facingId" placeholder="">
                <el-option v-for="c in facingType" :key="c.value" :label="c.text" :value="c.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.Details')" v-else prop="facingId">{{$t('m.Facing')}}
              <el-select v-model="agentForm.facingId" placeholder="">
                <el-option v-for="c in facingType" :key="c.value" :label="c.text" :value="c.value"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <!--Indoor Features-->
          <el-form-item :label="$t('m.IndoorFeatures')" class="agent-feature" prop="indoorFeatures">
            <el-checkbox-group
              v-model="agentForm.indoorFeatures">
              <el-checkbox v-for="e in indoorFeaturesType" :label="e.value" :key="e.value">{{e.text}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!--Outdoor Features-->
          <el-form-item :label="$t('m.OutdoorFeatures')" class="agent-feature" prop="outdoorFeatures">
            <el-checkbox-group
              v-model="agentForm.outdoorFeatures">
              <el-checkbox v-for="e in outdoorFeaturesType" :label="e.value" :key="e.value">{{e.text}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!--Special Features-->
          <el-form-item :label="$t('m.SpecialFeatures')" class="agent-feature" prop="specialFeatures">
            <el-checkbox-group
              v-model="agentForm.specialFeatures">
              <el-checkbox v-for="e in specialFeaturesType" :label="e.value" :key="e.value">{{e.text}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!--Title (Burmese)-->
          <el-row>
            <el-form-item :label="$t('m.TitleBurmese')" prop="burmeseTitle">
              <el-input
                style="min-width:500px;"
                type="textarea"
                :rows="2"
                :maxlength="80"
                placeholder=""
                @input="burmeseConter()"
                v-model="agentForm.burmeseTitle">
              </el-input>
            </el-form-item>
            <el-form-item class="agent-conter">
              <span>{{remnant2}}/80</span>
            </el-form-item>
          </el-row>
          <!--Title (English)-->
          <el-row>
            <el-form-item :label="$t('m.TitleEnglish')" prop="englishTitle">
              <el-input
                style="min-width:500px;"
                type="textarea"
                :rows="2"
                :maxlength="80"
                placeholder=""
                @input="englishConter()"
                v-model="agentForm.englishTitle">
              </el-input>
            </el-form-item>
            <el-form-item class="agent-conter">
              <span>{{remnant3}}/80</span>
            </el-form-item>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <div class="container-box">
        <el-row :gutter="40" type="flex" justify="center" style="padding:40px 0;">
          <el-col :span="6">
            <el-button @click.native="uploadAgentCoverPhoto(1,'agentForm')"
                       v-loading.fullscreen.lock="fullscreenLoading" size="medium" style="width:100%">
              {{$t('m.SaveasDraft')}}
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button @click.native="uploadAgentCoverPhoto(2,'agentForm')"
                       v-loading.fullscreen.lock="fullscreenLoading" size="medium" type="warning" style="width:100%">
              {{$t('m.Publish')}}
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>
<script>

  // 英文json
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import regions from '@/json/region'
  import townships from '@/json/township'
  import floors from '@/json/floor'
  import floorsTotal from '@/json/floorTotal'
  import masterBedroomBathroom from '@/json/master_bedroom_bathroom'
  import currencyData from '@/json/CurrencyData'
  import furnishingType from '@/json/furnishingType'
  import facingType from '@/json/facingType'
  import indoorFeaturesType from '@/json/indoorFeaturesType'
  import outdoorFeaturesType from '@/json/outdoorFeaturesType'
  import specialFeaturesType from '@/json/specialFeaturesType'

  // 缅甸文json
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_floors from '@/mmJson/floor'
  import mm_floorsTotal from '@/mmJson/floorTotal'
  import mm_masterBedroomBathroom from '@/mmJson/master_bedroom_bathroom'
  import mm_currencyData from '@/mmJson/CurrencyData'
  import mm_furnishingType from '@/mmJson/furnishingType'
  import mm_facingType from '@/mmJson/facingType'
  import mm_indoorFeaturesType from '@/mmJson/indoorFeaturesType'
  import mm_outdoorFeaturesType from '@/mmJson/outdoorFeaturesType'
  import mm_specialFeaturesType from '@/mmJson/specialFeaturesType'



  import googleMap from '@/components/maincomponents/googlemap'
  // import uploadimages from '@/components/maincomponents/uploadimages'
  import uploadmoreimages from '@/components/maincomponents/uploadmoreimages'
  import { uploadAgentPhotos, uploadAgentInfo, uploadAgentFormPhotos, initAgent, updateAgentInfo } from '@/api/api'
  import Qs from 'qs'
  import GoogleMapsLoader from 'google-maps'

  export default {
    name: 'Newdev',
    data () {
      return {
        // 初始化时表单数据
        // propertyType: propertyType,
        propertySubType: [],
        // regions: regions,
        townships: [],
        // floor: floors,
        // floorsTotal: floorsTotal,
        // master: masterBedroomBathroom,
        // bedroom: masterBedroomBathroom,
        // bathroom: masterBedroomBathroom,
        // // currency: currencyData,
        // conditionType: [
        //   {'value': null, 'text': ''},
        //   {'value': 1, 'text': 'Negotiable'},
        //   {'value': 2, 'text': 'View to Offer'}
        // ],
        remnant1: 0,
        remnant2: 0,
        remnant3: 0,
        coverPhoto: '',
        // furnishingType: furnishingType,
        // facingType: facingType,
        // indoorFeaturesType: indoorFeaturesType,
        // outdoorFeaturesType: outdoorFeaturesType,
        // specialFeaturesType: specialFeaturesType,
        fullscreenLoading: false,
        id: '',
        // 编辑提交时需传入version
        version: null,
        planPhotoList: [],
        agentForm: {
          transactionTypeId: 2,
          propertyTypeId: null,
          propertySubTypeId: null,
          regionId: null,
          townshipId: null,
          street: '',
          propertyName: '',
          totalFloor: null,
          floorNo: null,
          masterBedrooms: 0,
          bathrooms: 0,
          bedrooms: 0,
          floorLengthWidth: '0',
          landLengthWidth: '0',
          floorLength: null,
          floorWidth: null,
          floorSize: null,
          landLength: null,
          landWidth: null,
          landSize: null,
          currencyId: 1,
          price: null,
          mmkPrice: null,
          usdPrice: null,
          conditionTypeId: null,
          description: null,
          furnishingId: null,
          buildYear: null,
          facingId: null,
          indoorFeatures: [],
          outdoorFeatures: [],
          specialFeatures: [],
          burmeseTitle: '',
          englishTitle: '',
        },
        rules: {
          transactionTypeId: [
            {required: true, type: 'number', message: 'Please select Listing Type', trigger: 'change'}
          ],
          propertyTypeId: [
            {required: true, type: 'number', message: 'please select Property Type', trigger: 'change'}
          ],
          propertySubTypeId: [
            {required: true, type: 'number', message: 'please select Property Sub Type', trigger: 'change'}
          ],
          regionId: [
            {required: true, type: 'number', message: 'please select region', trigger: 'change'}
          ],
          townshipId: [
            {required: true, type: 'number', message: 'please select Township', trigger: 'change'}
          ],
          masterBedrooms: [
            {required: true, type: 'number', message: 'please select Master', trigger: 'change'}
          ],
          bathrooms: [
            {required: true, type: 'number', message: 'please select Bathroom', trigger: 'change'}
          ],
          bedrooms: [
            {required: true, type: 'number', message: 'please select Bedroom', trigger: 'change'}
          ],
          floorLengthWidth: [
            {required: true, message: 'please select', trigger: 'change'}
          ],
          price: [
            {required: true, type: 'number', message: 'please enter number', trigger: 'change'}
          ],
          landLength: [
            {type: 'number', message: 'enter number', trigger: 'change'}
          ],
          landWidth: [
            {type: 'number', message: 'enter number', trigger: 'change'}
          ],
          floorLength: [
            {type: 'number', message: 'enter number', trigger: 'change'}
          ],
          floorWidth: [
            {type: 'number', message: 'enter number', trigger: 'change'}
          ],
          floorSize: [
            {type: 'number', message: 'enter number', trigger: 'change'}
          ],
          landSize: [
            {type: 'number', message: 'enter number', trigger: 'change'}
          ]
        }
      }
    },
    computed: {
      computeFloorSize () {
        // this.agentForm.floorLength = Number(this.agentForm.floorLength).toFixed(2)
        // this.agentForm.floorWidth = Number(this.agentForm.floorWidth).toFixed(2)
        return (Number(this.agentForm.floorLength) * Number(this.agentForm.floorWidth)).toFixed(2)
      },
      computelandSize () {
        // this.agentForm.landLength = Number(this.agentForm.landLength).toFixed(2)
        // this.agentForm.floorWidth = Number(this.agentForm.landWidth).toFixed(2)
        return (Number(this.agentForm.landLength) * Number(this.agentForm.landWidth)).toFixed(2)
      },
      propertyType(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertyType
        }else {
          return propertyType
        }
      },
      regions(){
        if(this.$store.state.localLang == 'MM'){
          return mm_regions
        }else {
          return regions
        }
      },
      floor(){
        if(this.$store.state.localLang == 'MM'){
          return mm_floors
        }else {
          return floors
        }
      },
      floorsTotal(){
        if(this.$store.state.localLang == 'MM'){
          return mm_floorsTotal
        }else {
          return floorsTotal
        }
      },
      master(){
        if(this.$store.state.localLang == 'MM'){
          return mm_masterBedroomBathroom
        }else {
          return masterBedroomBathroom
        }
      },
      bedroom(){
        if(this.$store.state.localLang == 'MM'){
          return mm_masterBedroomBathroom
        }else {
          return masterBedroomBathroom
        }
      },
      bathroom(){
        if(this.$store.state.localLang == 'MM'){
          return mm_masterBedroomBathroom
        }else {
          return masterBedroomBathroom
        }
      },
      currency(){
        if(this.$store.state.localLang == 'MM'){
          return mm_currencyData
        }else {
          return currencyData
        }
      },
      furnishingType(){
        if(this.$store.state.localLang == 'MM'){
          return mm_furnishingType
        }else {
          return furnishingType
        }
      },
      facingType(){
        if(this.$store.state.localLang == 'MM'){
          return mm_facingType
        }else {
          return facingType
        }
      },
      indoorFeaturesType(){
        if(this.$store.state.localLang == 'MM'){
          return mm_indoorFeaturesType
        }else {
          return indoorFeaturesType
        }
      },
      outdoorFeaturesType(){
        if(this.$store.state.localLang == 'MM'){
          return mm_outdoorFeaturesType
        }else {
          return outdoorFeaturesType
        }
      },
      specialFeaturesType(){
        if(this.$store.state.localLang == 'MM'){
          return mm_specialFeaturesType
        }else {
          return specialFeaturesType
        }
      },
      conditionType(){
        if(this.$store.state.localLang == 'MM'){
          return  [
            {'value': null, 'text': ''},
            {'value': 1, 'text': 'ညွိႏွိဳင္း'},
            {'value': 2, 'text': 'လာေရာက္ေဆြးေႏြးႏိုင္'}
          ]
        }else {
          return [
            {'value': null, 'text': ''},
            {'value': 1, 'text': 'Negotiable'},
            {'value': 2, 'text': 'View to Offer'}
          ]
        }
      }
    },
    methods: {
      changeNumber (val) {
        //加逗号，后面保留两位小数
        // var retRmb =  Number(this.agentForm.price).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
        // 8位匹配
        // var retRmb = Number(this.agentForm.price).toFixed(2).replace(/^\d{1,8}(\.\d{1,2})?$/, '');
        if (val.replace(/\d{1,8}\.{0,1}\d{0,2}/, '') != '') {
          val = val.match(/\d{1,8}\.{0,1}\d{0,2}/) == null ? '' : val.match(/\d{1,8}\.{0,1}\d{0,2}/)
          if (val.toString().indexOf('.') == -1) //无小数点
          {
            console.log(val.indexOf('.'))
            val = val.toString().substr(0, 8) + '.' + val.toString().substr(8)
          }
        }
        console.log(Number(val))
        // val =  Number(val).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
        // this.agentForm.price =  val
        return val
      },
      delcommafy (val) {//去除千分位中的‘，’
        val = val.toString()
        val = val.replace(/,/gi, '')
        return val
      },
      getSubType (type) {
        let subType = []
        this.propertySubType = []
        this.agentForm.propertySubTypeId = null

        if(this.$store.state.localLang == 'MM'){
          for (var t of mm_propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }else {
          for (var t of propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }
        this.propertySubType = subType
      },
      getTownships (regionId) {
        let town = []
        this.townships = []
        this.agentForm.townshipId = null

        if(this.$store.state.localLang == 'MM'){
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }



        this.townships = town
      },
      descriptionConter () {
        let txtVal = this.agentForm.description.length
        this.remnant1 = txtVal
      },
      burmeseConter () {
        let txtVal = this.agentForm.burmeseTitle.length
        this.remnant2 = txtVal
      },
      englishConter () {
        let txtVal = this.agentForm.englishTitle.length
        this.remnant3 = txtVal
      },
      // message alert 用于前端错误提示信息
      messageToastErr (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      comparePhotoOrderNumber (property) {
        return function (obj1, obj2) {
          var value1 = obj1[property]
          var value2 = obj2[property]
          return value1 - value2     // 升序
        }
      },
      // Agent，提交表单——第一步，提交Agent主图
      uploadAgentCoverPhoto (status, agentForm) {
        this.$refs[agentForm].validate((valid) => {
          if (valid) {
            // agentForm.propertyTypeId==4时Floor Size不显示，不需要校验
            if (this.agentForm.propertyTypeId != 4) {
              // Floor Size (feet):  Length x Width 和Area不能同时为空，同时，Area为空时length和width不能为空
              if ((!this.agentForm.floorSize) && !(!!this.agentForm.floorLength && !!this.agentForm.floorWidth)) {
                this.messageToastErr('Floor Size(Length x Width or Area) is incomplete, please check out')
                return false
              }
            }
            // agentForm.propertyTypeId==4或者==8时Land Size必填，需要校验
            if (this.agentForm.propertyTypeId == 4 || this.agentForm.propertyTypeId == 8) {
              // Land Size (feet):  Length x Width 和Area不能同时为空，同时，Area为空时length和width不能为空
              if ((!this.agentForm.landSize) && !(!!this.agentForm.landLength && !!this.agentForm.landWidth)) {
                this.messageToastErr('Land Size (Length x Width or Area) is incomplete, please check out')
                return false
              }
            }
            /* 页面修改编辑时，不同propertyTypeId下，清空已隐藏的字段数据 start*/
            if (this.id) {
              // Land Size(hide),清空字段
              if (this.agentForm.propertyTypeId == 1 || this.agentForm.propertyTypeId == 2) {
                this.agentForm.landLength = null
                this.agentForm.landWidth = null
                this.agentForm.landSize = null
              }
              // Floor Number(hide),清空字段
              if (this.agentForm.propertyTypeId == 3) {
                this.agentForm.floorNo = null
              }
              // Total Floor/Floor Number/Master Bedrooms/Bedrooms/Bathrooms/Floor Size/Built Year/Furnishing(hide),清空字段
              if (this.agentForm.propertyTypeId == 4) {
                this.agentForm.totalFloor = null
                this.agentForm.floorNo = null
                this.agentForm.masterBedrooms = 0
                this.agentForm.bathrooms = 0
                this.agentForm.bedrooms = 0
                this.agentForm.floorLength = null
                this.agentForm.floorWidth = null
                this.agentForm.floorSize = null
                this.agentForm.buildYear = null
                this.agentForm.facingId = null
              }
            }
            /* 页面修改编辑时，不同propertyTypeId下，清空已隐藏的字段数据 end*/
            this.fullscreenLoading = true
            /*注释主图上传*/
            // let uploadCoverPhoto = this.$refs.uploadPhotos1.blobsObj
            // if (uploadCoverPhoto.length > 0) {
            //   let formData = new FormData()
            //   formData.append('file', uploadCoverPhoto[0])
            //   let config = {
            //     'Content-Type': 'multipart/form-data'
            //   }
            //   uploadAgentPhotos(formData, config).then((res) => {
            //     if (res.data) {
            //       if (res.data.errorID === 0) {
            //         let resData = res.data.object
            //         this.coverPhoto = resData
            //         this.submitAgentForm(status, resData)
            //       }else if (res.data.errorID === 100004) {
            //         this.$router.push('/login')
            //         this.fullscreenLoading = false
            //         this.showToast(res.data.errorID)
            //       } else {
            //         this.messageToastErr('error ,please try again leter')
            //       }
            //     }
            //   }).catch((error) => {
            //     this.fullscreenLoading = false
            //     this.messageToastErr('error ,please try again leter')
            //   })
            // } else {
            //   let resData = this.$refs.uploadPhotos1.coverPhoto
            //   this.submitAgentForm(status, resData)
            // }
            this.submitAgentForm(status)
          } else {
            this.fullscreenLoading = false
            this.messageToastErr('The form information is incomplete, please check out')
          }
        })
      },
      // Agent，提交表单——第二步，提交Agent表单信息
      submitAgentForm (status, coverUrl) {
        // let coverPhoto = coverUrl || ''
        let googleMapInfo = this.$refs.googleMap
        //货币选择--传price值
        if (this.agentForm.currencyId == 1) {
          this.agentForm.mmkPrice = this.agentForm.price
          this.agentForm.usdPrice = null
        } else {
          this.agentForm.usdPrice = this.agentForm.price
          this.agentForm.mmkPrice = null
        }
        // 有id -- 编辑页面信息
        if (this.id) {
          let updatePhotoReqList = []
          let uploadPhotos = this.$refs.uploadPhotos.uploadPhotoList
          for (let i = 0; i < uploadPhotos.length; i++) {
            if (uploadPhotos[i].photoId) {
              let potoReq = {
                orderNumber: i,
                id: uploadPhotos[i].photoId
              }
              updatePhotoReqList.push(potoReq)
            }
          }
          let formAjaxData = {
            transactionId: this.id,
            version: this.version,
            updatePhotoList: JSON.stringify(updatePhotoReqList),
            // coverPhoto: coverPhoto,
            transactionStatusId: status,
            transactionTypeId: this.agentForm.transactionTypeId,
            propertyTypeId: this.agentForm.propertyTypeId,
            propertySubTypeId: this.agentForm.propertySubTypeId,
            regionId: this.agentForm.regionId,
            townshipId: this.agentForm.townshipId,
            street: this.translateZTUnicode(this.agentForm.street),
            propertyName: this.translateZTUnicode(this.agentForm.propertyName),
            totalFloor: this.agentForm.totalFloor,
            floorNo: this.agentForm.floorNo,
            masterBedrooms: this.agentForm.masterBedrooms,
            bathrooms: this.agentForm.bathrooms,
            bedrooms: this.agentForm.bedrooms,
            floorLength: this.agentForm.floorLength,
            floorWidth: this.agentForm.floorWidth,
            floorSize: this.agentForm.floorSize,
            landLength: this.agentForm.landLength,
            landWidth: this.agentForm.landWidth,
            landSize: this.agentForm.landSize,
            mmkPrice: this.agentForm.mmkPrice,
            usdPrice: this.agentForm.usdPrice,
            conditionTypeId: this.agentForm.conditionTypeId,
            description: this.translateZTUnicode(this.agentForm.description),
            latitude: googleMapInfo.lat,
            longitude: googleMapInfo.lng,
            furnishingId: this.agentForm.furnishingId,
            buildYear: this.agentForm.buildYear,
            facingId: this.agentForm.facingId,
            indoorFeatures: this.agentForm.indoorFeatures,
            outdoorFeatures: this.agentForm.outdoorFeatures,
            specialFeatures: this.agentForm.specialFeatures,
            burmeseTitle: this.translateZTUnicode(this.agentForm.burmeseTitle),
            englishTitle: this.translateZTUnicode(this.agentForm.englishTitle)
          }
          // console.log(formAjaxData)
          let params = Qs.stringify(formAjaxData)
          let config = {
            'Content-Type': 'multipart/form-data'
          }
          updateAgentInfo(params, config)
            .then((res) => {
              if (res) {
                if (res.data) {
                  if (res.data.errorID === 0) {
                    console.log('表单信息提交成功')
                    let transactionId = this.id
                    console.log(res.data)
                    this.sendAgentFormPhotos(transactionId)
                  } else if (res.data.errorID === 100004) {
                    this.$router.push('/login')
                    this.fullscreenLoading = false
                    this.showToast(res.data.errorID)
                  } else {
                    this.fullscreenLoading = false
                    this.showToast(res.data.errorID)
                  }
                }
              }
            })
            .catch((error) => {
              console.log(error)
              this.fullscreenLoading = false
              this.messageToastErr('error,please try again later')
            })
        } else {
          let formAjaxData = {
            // coverPhoto: coverPhoto,
            transactionStatusId: status,
            transactionTypeId: this.agentForm.transactionTypeId,
            propertyTypeId: this.agentForm.propertyTypeId,
            propertySubTypeId: this.agentForm.propertySubTypeId,
            regionId: this.agentForm.regionId,
            townshipId: this.agentForm.townshipId,
            street: this.translateZTUnicode(this.agentForm.street),
            propertyName: this.translateZTUnicode(this.agentForm.propertyName),
            totalFloor: this.agentForm.totalFloor,
            floorNo: this.agentForm.floorNo,
            masterBedrooms: this.agentForm.masterBedrooms,
            bathrooms: this.agentForm.bathrooms,
            bedrooms: this.agentForm.bedrooms,
            floorLength: this.agentForm.floorLength,
            floorWidth: this.agentForm.floorWidth,
            floorSize: this.agentForm.floorSize,
            landLength: this.agentForm.landLength,
            landWidth: this.agentForm.landWidth,
            landSize: this.agentForm.landSize,
            mmkPrice: this.agentForm.mmkPrice,
            usdPrice: this.agentForm.usdPrice,
            conditionTypeId: this.agentForm.conditionTypeId,
            description: this.translateZTUnicode(this.agentForm.description),
            latitude: googleMapInfo.lat,
            longitude: googleMapInfo.lng,
            furnishingId: this.agentForm.furnishingId,
            buildYear: this.agentForm.buildYear,
            facingId: this.agentForm.facingId,
            indoorFeatures: this.agentForm.indoorFeatures,
            outdoorFeatures: this.agentForm.outdoorFeatures,
            specialFeatures: this.agentForm.specialFeatures,
            burmeseTitle: this.translateZTUnicode(this.agentForm.burmeseTitle),
            englishTitle: this.translateZTUnicode(this.agentForm.englishTitle)
          }
          console.log(formAjaxData)
          let params = Qs.stringify(formAjaxData)
          let config = {
            'Content-Type': 'multipart/form-data'
          }
          uploadAgentInfo(params, config)
            .then((res) => {
              if (res) {
                if (res.data) {
                  if (res.data.errorID === 0) {
                    console.log('表单信息提交成功')
                    let transactionId = res.data.object
                    console.log(res.data)
                    this.sendAgentFormPhotos(transactionId)
                  } else if (res.data.errorID === 100004) {
                    this.$router.push('/login')
                    this.fullscreenLoading = false
                    this.showToast(res.data.errorID)
                  } else {
                    this.fullscreenLoading = false
                    this.showToast(res.data.errorID)
                  }
                }
              }
            })
            .catch((error) => {
              console.log(error)
              this.fullscreenLoading = false
              this.messageToastErr('error,please try again later')
            })
        }
      },
      // Agent，提交表单——第三步，提交Agent Photos
      sendAgentFormPhotos (id) {
        let uploadPhotos = this.$refs.uploadPhotos.uploadPhotoList
        let formData = new FormData()
        //  是否有图片提交，有则提交图片，没有则显示表单提交成功信息
        let isToUpload = false
        for (let i = 0; i < uploadPhotos.length; i++) {
          if (uploadPhotos[i].photoBlob) {
            formData.append('file_agentPhotos_' + i, uploadPhotos[i].photoBlob)
            isToUpload = true
          }
        }
        if (isToUpload) {
          formData.append('transactionId', id)
          let config = {
            'Content-Type': 'multipart/form-data'
          }
          uploadAgentFormPhotos(formData, config).then((res) => {
            if (res) {
              if (res.data) {
                if (res.data.errorID === 0) {
                  this.showToast(res.data.errorID)
                  this.fullscreenLoading = false
                  this.removeAgentForm('agentForm')
                  setTimeout(() => {
                    this.$router.push({path: '/agentDetail', query: {id: id}})
                  }, 1200)
                } else {
                  this.fullscreenLoading = false
                  this.messageToastErr('Upload picture failed, please try again leter')
                }
              }
            }
          })
            .catch((error) => {
              this.fullscreenLoading = false
              console.log(error)
              this.messageToastErr('error, please try again leter')
            })
        } else {
          this.showToast(0)
          this.fullscreenLoading = false
          this.removeAgentForm('agentForm')
          setTimeout(() => {
            this.$router.push({path: '/agentDetail', query: {id: id}})
          }, 1200)
        }
      },
      removeAgentForm (agentForm) {
        this.$refs[agentForm].resetFields()
        this.$refs.googleMap.clearSearch()
        // this.$refs.uploadPhotos1.removeAllImage()
        this.$refs.uploadPhotos.removeAllImage()
      },
      // 初始化 agent
      initAgentForm () {
        initAgent(this.id).then((res) => {
          if (res.data) {
            console.log(res.data)
            if (res.data.errorID === 0) {
              let agentObj = res.data.object
              this.agentForm.transactionTypeId = agentObj.transactionTypeId
              this.agentForm.propertyTypeId = agentObj.propertyTypeId
              this.getSubType(agentObj.propertyTypeId)
              this.agentForm.propertySubTypeId = agentObj.propertySubTypeId
              this.agentForm.regionId = agentObj.regionId
              this.getTownships(agentObj.regionId)
              this.agentForm.townshipId = agentObj.townshipId
              this.agentForm.street = this.translateUTZaw(agentObj.street)
              this.agentForm.propertyName = this.translateUTZaw(agentObj.propertyName)
              this.agentForm.totalFloor = agentObj.totalFloor
              this.agentForm.floorNo = agentObj.floorNo
              this.agentForm.masterBedrooms = agentObj.masterBedrooms
              this.agentForm.bathrooms = agentObj.bathrooms
              this.agentForm.bedrooms = agentObj.bedrooms
              this.agentForm.floorLength = agentObj.floorLength
              this.agentForm.floorWidth = agentObj.floorWidth
              if (agentObj.floorLength && agentObj.floorWidth) {
                this.agentForm.floorSize = null
              } else {
                this.agentForm.floorSize = agentObj.floorSize
                if (agentObj.floorSize) {
                  this.agentForm.floorLengthWidth = '1'
                }
              }
              this.agentForm.landLength = agentObj.landLength
              this.agentForm.landWidth = agentObj.landWidth
              if (agentObj.landLength && agentObj.landWidth) {
                this.agentForm.landSize = null
              } else {
                this.agentForm.landSize = agentObj.landSize
                if (agentObj.landSize) {
                  this.agentForm.landLengthWidth = '1'
                }
              }
              if (agentObj.usdPrice) {
                this.agentForm.price = agentObj.usdPrice
                this.agentForm.currencyId = 3
              } else {
                this.agentForm.price = agentObj.mmkPrice
                this.agentForm.currencyId = 1
              }
              this.agentForm.conditionTypeId = agentObj.conditionTypeId
              this.agentForm.description = this.translateUTZaw(agentObj.description)
              // Google Map 初始化
              if (agentObj.latitude) {
                let latlng = {'lat': agentObj.latitude, 'lng': agentObj.longitude}
                this.$refs.googleMap.initMap(latlng)
              }
              this.agentForm.furnishingId = agentObj.furnishingId
              if (agentObj.buildYear) {
                this.agentForm.buildYear = agentObj.buildYear.toString()
              }
              this.agentForm.facingId = agentObj.facingId
              this.agentForm.indoorFeatures = agentObj.indoorFeatures
              this.agentForm.outdoorFeatures = agentObj.outdoorFeatures
              this.agentForm.specialFeatures = agentObj.specialFeatures
              this.agentForm.burmeseTitle = this.translateUTZaw(agentObj.burmeseTitle)
              this.agentForm.englishTitle = this.translateUTZaw(agentObj.englishTitle)
              this.version = agentObj.version
              // Photos 初始化
              // this.coverPhoto = agentObj.coverPhoto
              if (agentObj.photoList.length > 0) {
                // 根据后台返回的photoList中的orderNumber对图片进行排序，并将排序结果传至子组件uploadPhotos的uploadPhotoList
                let sortObj = agentObj.photoList.sort(this.comparePhotoOrderNumber('orderNumber'))
                this.$refs.uploadPhotos.uploadPhotoList = sortObj
              }
            }
          }
        }).catch((error) => {
          this.messageToastErr('error,please refresh the page later')
        })
      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
      translateZTUnicode(str){
        if (!str) return '';
        return this.$translateLang(str, 'zawgyiTounicode')
      },
    },
    components: {
      googleMap,
      // uploadimages,
      uploadmoreimages
    },
    mounted () {
      /* 页面初始化完成之前子组件未加载完google map 就调用initMap中的googleObj会报错
       * 现将google map 加载放在父组件上面
       */
      this.fullscreenLoading = true
      /* Google Map Init */
      window.mapsObj = ''
      GoogleMapsLoader.KEY = 'AIzaSyD6fBhKRpK6KPw8pxwQAQDI3AyzViGIUOY'
      GoogleMapsLoader.VERSION = '3.14'
      GoogleMapsLoader.LIBRARIES = ['geometry', 'places']
      GoogleMapsLoader.load((google) => {
        let autocomplete = new google.maps.places.Autocomplete((document.getElementsByName('googleMapInput')[0]), {types: ['geocode']})
        let geocoder = new google.maps.Geocoder()
        let googleObj = google
        let mapsObj = {autocomplete: autocomplete, geocoder: geocoder, googleObj: googleObj}
        window.mapsObj = mapsObj
        // google地图初始化后初始化页面form数据
        this.id = this.$route.query.id || ''
        if (this.id) {
          this.initAgentForm()
          this.fullscreenLoading = false
        } else {
          this.fullscreenLoading = false
        }
      })
    }
  }
</script>
<style>
  .form-box {
    padding-top: 60px;
    /*max-width: 50%;*/
  }

  .form-min-width {
    min-width: 1200px;
    overflow: auto;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .new-agent .container-padding {
    padding: 20px 40px 0 40px;
  }

  .agent-photo .photo-title {
    display: none;
  }

  .agent-photo .upload-box {
    margin: 0;
  }

  .agent-photo .el-form-item__content {
    max-width: 85%;
  }

  .agent-google-map {
    width: 100%;
  }
  .agent-google-map .google-map-box{
    padding-left:240px;
  }
  .agent-google-map #myMap{
    width:55%;
  }
  .agent-google-map .search-top {
    margin-top: 0;
  }

  .agent-google-map .el-form-item__content {
    width: 85%;
  }

  .agent-google-map .el-form-item {
    width: 100%;
    margin-bottom: 1em;
  }

  .agent-google-map .el-form-item .el-form-item__content {
    width: 100%;
  }

  .agent-feature {
    width: 80%;
    /*overflow: auto;*/
  }

  .agent-feature .el-form-item__content {
    width: 60%;
  }

  .agent-feature .el-form-item__content .el-checkbox {
    margin-left: 0;
    padding-right: 100px;
    width: 20%;
  }

  .agent-conter .el-form-item__content {
    line-height: 100%;
  }

  .new-agent .el-collapse-item__header {
    /*background:#f0f0f0;*/
  }

  .spread-box .el-collapse-item__arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .spread-box .el-collapse-item.is-active .el-collapse-item__header .el-collapse-item__arrow {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
</style>
